<template>
  <el-skeleton animated :throttle="throttle || 0" :loading="loading === undefined ? true : loading">
    <template slot="template">
      <div class="loading-content">
        <template v-for="i in rows">
          <el-skeleton-item variant="text"/>
          <el-skeleton-item variant="text"/>
        </template>
      </div>
    </template>
    <template>
      <slot/>
    </template>
  </el-skeleton>
</template>

<script>
export default {
  name: "RecipientLoading",
  props: ['throttle', 'loading', 'count'],
  computed: {
    rows() {
      let count = this.count || 10;
      let result = [];
      for (let i = 0; i < count; i++) {
        result.push(i);
      }
      return result;
    }
  }
}
</script>

<style scoped>
.loading-content {
  display: grid;
  grid-template-columns: 25px 1fr;
  grid-auto-rows: 25px;
  gap: 5px 10px;
  place-items: stretch;
}
</style>